
import React from 'react';
import classnames from 'classnames';
import css from './index.less';
import Range from 'components/config/range';
import Group from 'components/config/group';
import Bull from 'components/config/bull';
import Whxy from 'components/config/whxy';
import Stroke from 'components/config/stroke';
import Icon from 'components/icon';
import { Collapse } from 'antd';
import { observer, inject } from 'mobx-react';


@inject('store')
@observer
export default class VideoConfig extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

    };
  }



  componentDidMount() {

  }

  setW(e) {
    const {store} = this.props;
    store.selected.setAttr('videoWidth', e.target.value);
  }

  setH(e) {
    const {store} = this.props;
    store.selected.setAttr('videoHeight', e.target.value);
  }

  setUrl(e) {
    const {store} = this.props;
    store.selected.setAttr('src', e.target.value);
  }

  checkIcon() {
    const {store} = this.props;
    store.selected.setAuto();
  }


  render() {
    const { videoWidth, videoHeight, src, autoplay, videoImg } = this.props.store.selected;
    const collapseProps = {
      bordered: false,
      defaultActiveKey: ['0', '1', '2', '3', '4', '5'],
      className: css.body,
    };

    const imgProps = {
      style: {
        backgroundImage: `${videoImg}`,
      }

    };


    const groups = [
      {
        title: '视频链接',
        children: (
          <div className={css.inputUrl}>
            <label>URL</label>
            <input onChange={this.setUrl.bind(this)} value={src}/>
          </div>
        )
      },
      {
        title: '视频宽高',
        children: (
          <div>
            <Bull key="0" title="视频宽度">
              <input className={css.show} onChange={this.setW.bind(this)} value={videoWidth} type="number"/>
              <span className={css.label}>PX</span>
              <Icon type="icon-emoji"/>
            </Bull>
            <Bull key="1" title="视频高度">
              <input className={css.show} onChange={this.setH.bind(this)} value={videoHeight} type="number"/>
              <span className={css.label}>PX</span>
              <Icon type="icon-emoji"/>
            </Bull>
          </div>
        )
      },
      {
        title: '视频封面图',
        children: (
          <div className={css.showImg}>
            <div {...imgProps}>
              <Icon type="icon-addition" className={css.addition}/>
            </div>
            <span>替换图片</span>
            <span>删除图片</span>
          </div>
        )
      }
    ];

    const iconProps = {
      type: autoplay ? 'icon-radio-checked' : 'icon-radio-unchecked',
      className: css.icon,
    };


    return (

    <div>
      <div className={css.autoplay} onClick={this.checkIcon.bind(this)}>
        <Icon {...iconProps}/>
        <span>自动播放</span>
      </div>
      <Collapse {...collapseProps}>
        {groups.map((group, key) => {
          const _props = {
            ...group,
            key,
          };
          return <Group {..._props}/>;
        })}
      </Collapse>
    </div>



    );
  }
}
